<template>
  <div class="content-block block---2">
    <div class="info-head">{{ title }}</div>
    <div v-if="radarIndicator && radarIndicator.length > 0 && radarData && radarData.length > 0" class="info-content">
      <v-chart
        :option="chartOption"
        style="width: 100%;height:300px;"
        :theme="chartTheme" autoresize
      ></v-chart>
    </div>
  </div>
</template>

<script>
import MixinChartOptionToolbox from '@/mixins/chart-option-toolbox';
import { defaultNumber, restoreFormatNumber } from '@/utils';
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'grid-item-two',
  mixins: [MixinChartOptionToolbox, MixinVchartTheme],
  props: {
    radarName: String,
    radarIndicator: {
      type: Array,
      default () {
        return [];
      },
    },
    radarData: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    title () {
      return this.radarName || '';
    },
    chartOption () {
      return {
        tooltip: {
          position: 'left',
          extraCssText: 'z-index: 9999;'
        },
        toolbox: this.getChartOptionToolbox({
          feature: {
            magicType: null
          }
        }),
        radar: {
          radius: '60%',
          indicator: [
            ...this.radarIndicator
          ]
        },
        series: [
          {
            name: this.title,
            type: 'radar',
            symbolSize: 10,
            areaStyle: {
              color: '#91cc75',
              opacity: 0.6
            },
            itemStyle: {
              color: '#91cc75'
            },
            data: [
              this.radarData.map(restoreFormatNumber)
            ]
          }
        ]
      }
    }
  },
  methods: {
    optionToContent (opt) {
      try {
        const indicator = opt.radar[0].indicator || [];
        const serie = opt.series[0]
        const data = [
          ['能源种类', '数值'],
          ...indicator.map((item, index) => [item.name, defaultNumber((serie.data[0] || [])[index])])
        ]
        return this.generateTable(data)
      } catch (e) {
        console.warn(e)
      }
    }
  },
}
</script>
